<template>
  <div class="main section clearfix">
    <el-form
      :model="query"
      ref="query"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="关键词" prop="keyWord">
        <el-input v-model="query.keyWord"></el-input>
      </el-form-item>

      <el-form-item label="内部推广员" prop="internal">
        <el-input v-model="query.internal"></el-input>
      </el-form-item>
      <el-form-item label="外部推广员" prop="external">
        <el-input v-model.number="query.external"></el-input>
      </el-form-item>
      <el-form-item label="经纪人邀请" prop="agentInviteState">
        <el-select v-model="query.agentInviteState" placeholder="请选择">
          <el-option
            v-for="item in whetherData"
            :key="item.itemValue"
            :label="item.itemText"
            :value="item.itemValue"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账号状态" prop="state">
        <el-select v-model="query.state" placeholder="请选择">
          <el-option
            v-for="item in accountData"
            :key="item.itemValue"
            :label="item.itemText"
            :value="item.itemValue"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <div>
        <el-form-item label-width="0" class="button">
          <el-button @click="queryFun" type="danger" v-no-more-click
            >搜索</el-button
          >
          <el-button @click="emptyFun" type="primary" v-no-more-click>
            重置</el-button
          >
        </el-form-item>
        <el-form-item label-width="0">
          <el-button
            type="primary"
            @click="exportDept"
            v-if="userExportUserBtn"
            style="width: 80px;height: 32px;line-height:0"
            v-no-more-click
            >导出</el-button
          >
          <el-button
            type="primary"
            @click="addFun"
            v-if="userSaveBtn"
            style="width: 80px;height: 32px;line-height:0"
            v-no-more-click
            >新增</el-button
          >
          <el-button style="height: 32px;line-height:0" v-no-more-click
            >+批量邀请成为经纪人</el-button
          >
        </el-form-item>
      </div>
    </el-form>
    <el-table :data="userList" border stripe style="width: 100%">
      <el-table-column
        prop="username"
        label="用户名称"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="idCard"
        label="身份证号"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="phoneNumber"
        label="手机号码"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="email"
        label="邮箱"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="internal"
        label="内部推广员"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="external"
        label="外部推广员"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="agentInviteState"
        label="是否经纪人邀请"
        align="center"
        :formatter="whetherTranslation"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="state"
        label="账号状态"
        align="center"
        :formatter="accountTranslation"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        width="100"
      />
      <el-table-column
        prop="updateTime"
        label="更新时间"
        align="center"
        width="100"
      />
      <el-table-column
        label="操作"
        width="150"
        align="center"
        v-if="userDeleteBtn || userUpdateBtn"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="editFun(scope.row)"
            v-if="userUpdateBtn"
            style="color:#FFA42F"
            v-no-more-click
            >修改</el-button
          >
          <el-button
            type="text"
            size="small"
            style="margin:0"
            @click="orderFun(scope.row)"
            v-no-more-click
            >订单表</el-button
          >
          <el-popconfirm
            title="确定删除此数据吗？"
            @onConfirm="delFun(scope.$index, scope.row)"
            v-if="userDeleteBtn"
          >
            <el-button
              slot="reference"
              type="text"
              size="small"
              v-if="userDeleteBtn"
              style="color:#FB575E"
              v-no-more-click
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页控件 -->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next"
        :total="total"
        :page-size="query.pagesize"
        :current-page.sync="currentPage"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="800px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <Registered
        :dialogVisible="dialogVisible"
        v-if="dialogVisible"
        v-on:dialogVisible="closeDialog($event)"
        :accountData="accountData"
        :whetherData="whetherData"
        :content="content"
        @getList="getList"
      ></Registered>
    </el-dialog>
    <!-- 订单表 -->
    <el-dialog
      title="订单查看"
      :visible.sync="RegisteredDia"
      width="800px"
      top="30px"
      @close="closeDia"
    >
      <RegisteredDia :diaId="diaId" v-if="RegisteredDia"></RegisteredDia>
    </el-dialog>
    <!--    导出-->
    <el-dialog title="导出" :visible.sync="exportdialog" width="20%">
      <span>是否确认导出所有数据?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="exportdialog = false" v-no-more-click
          >取 消</el-button
        >
        <el-button type="primary" @click="exportDept" v-no-more-click
          >提 交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserList,
  getEmployee,
  delUser
  // exportReport
  //   getUserFindOne
} from "../../assets/js/api";
import { expotOut } from "../../assets/js/utlis";
import Registered from "../../components/user/Registered";

import RegisteredDia from "../../components/user/RegisteredDia";
import { checkPermiss } from "../../assets/js/utlis";
// import fileDownload from "js-file-download";
//import axios from "axios";
export default {
  name: "RegisteredUsers",
  components: { Registered, RegisteredDia },
  data() {
    return {
      query: {
        keyWord: null,
        internal: null,
        external: null,
        agentInviteState: null,
        state: null,
        pageNo: 1,
        pagesize: 10
      },
      currentPage: 1,
      total: 10,
      pages: 0,
      fileParmas: {
        keyWord: null,
        internal: null,
        external: null,
        agentInviteState: null,
        state: null
      },
      dialogVisible: false,
      exportdialog: false,
      RegisteredDia: false,
      title: "",
      userList: [],
      accountData: [],
      whetherData: [],
      content: "",
      diaId: ""
    };
  },
  watch: {
    total: {
      handler() {
        if (
          this.total == (this.query.pageNo - 1) * this.query.pagesize &&
          this.total != 0
        ) {
          this.query.pageNo -= 1;
          this.getList(); //获取列表数据
        }
      }
    }
  },
  created() {
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.getList();
    this.accountState();
    this.whetherState();
  },
  computed: {
    //  添加
    userSaveBtn: function() {
      return checkPermiss("sys:user:save", this.golbalPermissions);
    },
    // 修改
    userUpdateBtn: function() {
      return checkPermiss("sys:user:update", this.golbalPermissions);
    },
    // 删除
    userDeleteBtn: function() {
      return checkPermiss("sys:user:delete", this.golbalPermissions);
    },
    // 导出
    userExportUserBtn: function() {
      return checkPermiss("sys:user:exportUser", this.golbalPermissions);
    }
  },
  methods: {
    // 获取表格数据
    getList() {
      getUserList(this.query).then(res => {
        this.userList = res.data.records;
        this.query.pagesize = res.data.size;
        this.query.pageNo = res.data.current;
        this.total = res.data.total;
        this.pages = res.data.pages;
      });
    },
    // 查询账户状态数据字典
    accountState() {
      getEmployee("account_state").then(res => {
        this.accountData = res.data;
      });
    },
    // 状态翻译
    accountTranslation(row) {
      return this.selectDictLabel(this.accountData, row.state);
    },
    // 经纪人邀请数据字典
    whetherState() {
      getEmployee("whether_state").then(res => {
        this.whetherData = res.data;
      });
    },
    // 经纪人状态翻译
    whetherTranslation(row) {
      return this.selectDictLabel(this.whetherData, row.agentInviteState);
    },
    // 搜索按钮
    queryFun() {
      this.query.pageNo = 1;
      this.getList();
    },
    // 清空按钮
    emptyFun() {
      this.$refs["query"].resetFields();
      this.query.pageNo = 1;
      this.getList();
    },
    // 新增
    addFun() {
      this.dialogVisible = true;
      this.title = "新增";
      this.content = null;
    },
    // 修改
    editFun(row) {
      this.dialogVisible = true;
      this.title = "修改";
      this.content = row.id;
    },
    // 删除
    delFun(index, obj) {
      delUser(obj.id).then(res => {
        if (res.code === 200) {
          this.$message({
            message: res.message,
            type: "success"
          });
          this.getList();
        } else {
          this.$message({
            message: res.message,
            type: "error"
          });
          this.getList();
        }
      });
    },
    // 订单表
    orderFun(row) {
      this.RegisteredDia = true;
      this.diaId = row.id;
    },
    closeDia() {
      this.dialogVisible = false;
      this.diaId = null;
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.getList(this.query);
    },
    handleSizeChange(psize) {
      this.query.pageNo = psize;
      this.getList(this.query);
    },
    //关闭弹窗
    closeDialog(msg) {
      this.dialogVisible = msg;
    },
    //  导出
    exportDept() {
      this.fileParmas.keyWord = this.query.keyWord;
      this.fileParmas.internal = this.query.internal;
      this.fileParmas.external = this.query.external;
      this.fileParmas.agentInviteState = this.query.agentInviteState;
      this.fileParmas.state = this.query.state;
      expotOut(
        "get",
        "/sys/user/exportUser",
        this.fileParmas, // 导出请求参数
        "用户信息" // 导出文件名字
      );
    }
  }
};
</script>

<style scoped type="less">
.demo-ruleForm .el-form-item {
  float: left;
  margin-bottom: 15px;
}
.button {
  width: 100%;
}
::v-deep .el-input {
  width: 210px;
}
::v-deep .el-form-item__content {
  text-align: left;
}
::v-deep .el-form--inline .el-form-item__content {
  width: 210px;
  line-height: 42px;
}
::v-deep .el-table td {
  padding: 10px 0;
}
::v-deep .el-table th {
  padding: 10px 0;
}
::v-deep .el-input__inner {
  height: 32px;
}
::v-deep .el-input__icon {
  line-height: 32px;
}
::v-deep .button .el-button {
  width: 80px;
  height: 32px;
  line-height: 0;
}
::v-deep .el-table th > .cell {
  font-weight: bold;
  color: #333;
  font-size: 14px;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(59, 157, 248, 0.1);
}
.main {
  position: relative;
}
::v-deep .el-pagination {
  position: absolute;
  margin-top: 20px;
  right: 0;
}
::v-deep .el-pagination__total {
  visibility: hidden;
}
.title {
  position: absolute;
  left: 0;
  margin-top: 15px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 21px;
}
</style>
